<template>
	<view class="container">
		<view class="top-container">
			<view class="bg bg-blur flex align-center" :style='{"background-image":"url("+imgUrl+")"}'></view>
			<view class="qrcode-wrapper flex align-center justify-center">
				<view class="qrcode-inner text-center">
					<!-- <view class="qrcode">
						<image :src="groupCourseOrder.qrcode_url" mode="aspectFill"></image>
					</view> -->
					<view class="text-white text-lg">{{groupCourseOrder.group_course_title}}</view>
					<view class="text-white margin-top text-lg">上课时间：{{groupCourseOrder.full_course_time}}</view>
				</view>
			</view>
		</view>
		<view class="list-container">
			<view class="items text-white padding">
				<view class="title text-orange text-lg">授课教练</view>
				<view class="content flex margin-top">
					<view class="avatar-wrapper">
						<image :src="groupCourseOrder.coach_cover_url" mode="aspectFill"></image>
					</view>
					<view class="info-wrapper margin-left">
						<view class="name text-white">{{groupCourseOrder.coach_name}}</view>
						<view class="intro text-gray margin-top-xs text-sm">{{groupCourseOrder.coach_brief_intro}}</view>
					</view>
				</view>
			</view>
			<view class="items text-white padding">
				<view class="title text-orange text-lg">课程</view>
				<view class="content flex margin-top">
					<view class="avatar-wrapper no-radius">
						<image :src="groupCourseOrder.group_course_cover_url" mode="aspectFill"></image>
					</view>
					<view class="info-wrapper margin-left">
						<view class="name text-white">{{groupCourseOrder.group_course_title}}</view>
						<view class="intro text-gray margin-top-xs text-sm">{{groupCourseOrder.group_course_intro}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="button-area padding mt40">
			<button class="cu-btn bg-orange block lg" @tap="audit(groupCourseOrder)">立即核销</button>
		</view>
	</view>
</template>

<script>
import util from '@/utils/util.js';
import groupCourseOrder from '@/api/group_course_order.js';

export default {
	data() {
		return {
			groupCourseOrder: {},
			imgUrl: ''
		}
	},
	onLoad (options) {
		this.getGroupCourseOrder(options.id);
	},
	methods: {
		async getGroupCourseOrder(id) {
			const res = await groupCourseOrder.show(id);
			this.groupCourseOrder = res.data;
			this.imgUrl = this.groupCourseOrder.group_course_cover_url;
		},
		async audit(item) {
			uni.showModal({
				title: '提示',
				content: '确定要核销吗？',
				success: async function (res) {
					if (res.confirm) {
						const res = await groupCourseOrder.audit(item.id);
						if (res.code === 0) {
							uni.showModal({
								title: '提醒',
								content: '核销成功',
								showCancel: false,
								confirmText: '返回首页',
								success(action) {
									if (action.confirm) {
										util.toHome(true);
									}
								}
							});
						}
					}
				}
			});
		}
	}
}
</script>

<style scoped lang="less">
	.container {
		.top-container {
			height: 400upx;
			overflow: hidden;
			.bg {
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
				text-align: center;
				height: 400upx;
				line-height: 400upx;
			}
			.bg-blur {
				float: left;
				width: 100%;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
				-webkit-filter: blur(5upx);
				-moz-filter: blur(5upx);
				-o-filter: blur(5upx);
				-ms-filter: blur(5upx);
				filter: blur(5upx);
			}
			.qrcode-wrapper {
				position:absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 400upx;
				.qrcode-inner {
					display: flex;
					flex-direction: column;
					align-items: center;
					.qrcode {
						width: 180upx;
						height: 210upx;
						image {
							height: 100%;
						}
					}
				}
			}
		}
		.list-container {
			.items {
				.title {
					border-bottom: 1px solid #000000;
					padding-bottom: 30upx;
				}
				.content {
					.avatar-wrapper {
						width: 100upx;
						height: 100upx;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
						&.no-radius {
							width: 130upx;
							height: 130upx;
							image {
								width: 100%;
								height: 100%;
								border-radius: 0;
							}
						}
					}
				}
			}
		}
	}
</style>
